<div class="modal-header no-padding">
    <div class="table-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
            <span class="white">×</span>
        </button>
        表单demo
    </div>
</div>

<div class="modal-body no-padding">
    <form class="form-horizontal" role="form">
        <!-- #section:elements.form -->
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label>

            <div class="col-sm-9">
                <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
            </div>
        </div>

        <!-- /section:elements.form -->
        <div class="space-4"></div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label>

            <div class="col-sm-9">
                <input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" />
                <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">Inline help text</span>
                </span>
            </div>
        </div>

        <div class="form-group has-error">
            <label class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right" for="inputError">Input with error</label>

            <div class="col-xs-12 col-sm-5">
                <span class="block input-icon input-icon-right">
                    <input type="text" class="width-100" id="inputError">
                    <i class="ace-icon fa fa-times-circle"></i>
                </span>
            </div>
            <div class="help-block col-xs-12 col-sm-reset inline"> Error tip help! </div>
        </div>


        <div class="form-group has-error">
            <label class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right" for="inputError">textarea with error</label>

            <div class="col-xs-12 col-sm-5">
                <span class="block input-icon input-icon-right">
                    <textarea class="width-100" id="inputError"></textarea>
                    <i class="ace-icon fa fa-times-circle"></i>
                </span>
            </div>
            <div class="help-block col-xs-12 col-sm-reset inline"> Error tip help! </div>
        </div>

        <div class="space-4"></div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Readonly field </label>

            <div class="col-sm-9">
                <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" />
                <span class="help-inline col-xs-12 col-sm-7">
                    <label class="middle">
                        <input class="ace" type="checkbox" id="id-disable-check" />
                        <span class="lbl"> Disable it!</span>
                    </label>
                </span>
            </div>
        </div>

        <div class="space-4"></div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label>

            <div class="col-sm-9">
                <input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" />
                <div class="space-2"></div>

                <div class="help-block" id="input-size-slider"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label>

            <div class="col-sm-9">
                <div class="clearfix">
                    <input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" />
                </div>

                <div class="space-2"></div>

                <div class="help-block" id="input-span-slider"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right">Input with Icon</label>

            <div class="col-sm-9">
                <!-- #section:elements.form.input-icon -->
                <span class="input-icon">
                    <input type="text" id="form-field-icon-1" />
                    <i class="ace-icon fa fa-leaf blue"></i>
                </span>

                <span class="input-icon input-icon-right">
                    <input type="text" id="form-field-icon-2" />
                    <i class="ace-icon fa fa-leaf green"></i>
                </span>

                <!-- /section:elements.form.input-icon -->
            </div>
        </div>
    </form>
</div>

<div class="modal-footer no-margin-top">
    <button data-dismiss="modal" class="btn btn-sm btn-danger pull-left">
        <i class="ace-icon fa fa-times"></i>
        关闭
    </button>
    <button data-dismiss="modal" class="btn btn-info btn-sm pull-right">
        <i class="ace-icon fa fa-check"></i>
        提交
    </button>
</div>